<template>
	<view class="">
		<view class="content">
			<view class="search" @click="search">
				<u-icon name="search" color="#999999" size="30"></u-icon>
				<text class="p_left_10 c-999">搜索商品</text>
			</view>
			<view class="" style="">
				<u-swiper :list="list"></u-swiper>
			</view>
			<view class="con_2 display just_space">
				<view class="con_2_class" v-for="(item,index) in classList" :key="index" @click="go_class(item,index)">
					<image :src="item.image"></image>
					<view class="c-666 ft_12">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="con_3 display just_space">
				<view class="con_3_left" @click="miaoshaList">
					<view class="p_bottom_10">
						<view class="ft_16 c-333">
							限时秒杀
						</view>
						<u-count-down :timestamp="timestamp" :show-days="false" separator-color="#ee1b1b" bg-color="#ee1b1b" color="#ffffff" font-size="24" :show-border="true" border-color="#ee1b1b"></u-count-down>
					</view>
					<view class="" style="text-align: right;">
						<image :src="images.seckill_image"></image>
					</view>
				</view>
				<view class="con_3_right">
					<view class="top display just_space" @click="pindanList">
						<view class="" style="line-height: 1.8em;">
							<view class="ft_16 c-333">
								拼团商城
							</view>
							<view class="ft_12 c-333">
								拼着买更实惠
							</view>
						</view>
						<image :src="images.group_image" style="width: 72px;height: 60px;"></image>
					</view>
					<view class="top display just_space" @click="jifenList">
						<view class="" style="line-height: 1.8em;">
							<view class="ft_16 c-333">
								积分商城
							</view>
							<view class="ft_12 c-333">
								积分兑换商品
							</view>
						</view>
						<image :src="images.integral_image" style="width: 72px;height: 60px;"></image>
					</view>
				</view>
			</view>
			<view class="con_4">
				<view class="title display juzhong">
					<view class="fenge"></view>
					<view class="ft_20 fw-b " style="padding: 0 10px;">
						推荐商品
					</view>
					<view class="fenge"></view>
				</view>
				<view class="options display">
					<view class="option" @click="options(0)">
						<text style="padding-right: 5px;">默认排序</text>
						<u-icon name="arrow-up-fill" color="#999999" size="20"></u-icon>
						<!-- <u-icon name="arrow-up-fill" color="#999999" size="20" v-else></u-icon> -->
					</view>
					<view class="option" @click="options(1)">
						<text style="padding-right: 5px;">销量</text>
						<u-icon name="arrow-up-fill" color="#999999" size="20" v-if="sales==1"></u-icon>
						<u-icon name="arrow-down-fill" color="#999999" size="20" v-else></u-icon>
					</view>
					<view class="option" @click="options(2)">
						<text style="padding-right: 5px;">价格</text>
						<u-icon name="arrow-up-fill" color="#999999" size="20" v-if="price==1"></u-icon>
						<u-icon name="arrow-down-fill" color="#999999" size="20" v-else></u-icon>
					</view>
				</view>
				<u-waterfall v-model="shopList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<shop v-for="(item,index) in leftList" :key="index" :shopimg="item.image" :shopname="item.name" :oldprice="item.market_price" :newprice="userInfo.role_type==0 ? item.prices:userInfo.role_type==1 ? item.prices1:userInfo.role_type==2?item.prices2:item.prices3" :man="item.activity" :yuexiao="item.sales" @click.native="go_shopdetail(item)"></shop>
					</template>
					<template v-slot:right="{rightList}">
						<view class="display" style="align-items: flex-end;flex-flow: column;">
							<shop v-for="(item,index) in rightList" :key="index" :shopimg="item.image" :shopname="item.name" :oldprice="item.market_price" :newprice="userInfo.role_type==0 ? item.prices:userInfo.role_type==1 ? item.prices1:userInfo.role_type==2?item.prices2:item.prices3" :man="item.activity" :yuexiao="item.sales" @click.native="go_shopdetail(item)"></shop>
						</view>
					</template>
				</u-waterfall>
				<!-- <view class="display just_space tuijian" style="flex-flow: wrap;">
					<shop v-for="(item,index) in shopList" :key="index" :shopimg="item.image" :shopname="item.name" :oldprice="item.market_price" :newprice="userInfo.role_type==0 ? item.prices:userInfo.role_type==1 ? item.prices1:userInfo.role_type==2?item.prices2:item.prices3" :man="item.activity" :yuexiao="item.sales" @click.native="go_shopdetail(item)"></shop>
				</view> -->
			</view>
		</view>
		<!-- 首次登录弹窗 -->
		<u-mask :show="show">
			<view class="mask">
				<image src="/static/index/index/indexYHQ.png" style="width: 250px;height: 250px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: -1;">
					<view class="c-333 ft_12 fw-b">
						<!-- {{coupon.title}} -->
					</view>
					<view class="display juzhong price">
						<view class="price1">￥</view>
						<view class="price2">{{coupon.price}}</view>
					</view>
					<view class="ft_12 fw-b" style="color: #990815;">
						{{coupon.limit==0?'全场通用':'满'+coupon.price_cond+'可用'}}
					</view>
					<view class="display juzhong lingqu">
						<view class="fw-b lingqu1" @click="lingqu">
							立即领取
						</view>
					</view>
				</image>
			</view>
		</u-mask>
	
	</view>
</template>

<script>
	import shop from "../../components/shop.vue"
	export default {
		data() {
			return {
				list: [], //轮播图
				images:{}, //特殊商品展示图
				classList:[], //分类
				coupon:"",//弹窗优惠券
				userInfo:"", //用户信息
				timestamp:0, //倒计时
				
				shopList:[], //推荐商品列表
				page:1,//推荐商品页数
				sales:1, // 销量   1/2  升序/降序
				price:1, // 价格
				
				show:false, //首次登录弹窗
				showbackg:"", //弹窗背景图片
				
			}
		},
		components:{
			shop
		},
		onLoad(e) {
			if(e.scene){
				// this.$all.setData('pid',e.scene)
				uni.setStorageSync('pid',e.scene)
				console.log(e,'二维码参数');
				console.log(e.scene,'二维码参数父id');
				console.log(uni.getStorageSync('pid'));
			}
			console.log(this.$all.getData('user'),'用户信息');
			// #ifdef APP-PLUS || H5
			// let user={token: "9e655843-35a7-4dd2-a0f6-61ee9be1900d"}
			if(!uni.getStorageSync("user")){
				uni.reLaunch({
					url:"../../mine/pages/login/login1"
				})
			}
			// #endif
			this.getSystemInfo() //获取系统信息
			this.getTJlist(1,'','') //获取推荐商品
			this.getindexInfo() //获取首页信息
			
		},
		onReachBottom() {//触底获取推荐商品
			this.page+=1
			console.log(this.page);
			this.getTJlist(this.page,this.sales,this.price) 
		},
		methods: {
			is_login(){ //判断是否登录
				// #ifdef MP-WEIXIN
				if(!uni.getStorageSync("user")){
					this.$all.toast("请登录后操作")
					setTimeout(()=>{
						uni.reLaunch({
							url:"../../mine/pages/login/login"
						})
					},500)
					return false;
				}else{
					return true;
				}
				// #endif
				// #ifndef MP-WEIXIN
				return true;
				// #endif
			},
			getindexInfo(){ //获取首页信息
				this.$myRequest('index/index',{})
				.then(res=>{
					console.log(res.data);
					let data=res.data.data
					let newtime= Date.parse(new Date());
					this.timestamp=data.seckill.time_end - newtime/1000 //活动倒计时
					this.list=data.banner //banner图
					this.classList=data.cate //分类
					this.images=data.image //特殊商品展示图
					
					if(data.coupon){ //弹窗优惠券
						this.coupon=data.coupon 
						// this.tanchaung() //判断是否第一次登陆 领取优惠券
					}
				})
				
				if(uni.getStorageSync("user")){ //登录状态
					this.$myRequest('user/index',{}) //获取个人信息
					.then(res=>{
						if(res.data.code==1){
							this.$all.setData('userInfo',res.data.data.info)
							this.userInfo=this.$all.getData('userInfo')
							// console.log(this.userInfo.role_type);  // 0/1/2/3   普通用户/经销商/门店/体彩
						}
					})
				}
				
			},
			getTJlist(page,sales,price){ //获取推荐商品
				this.$myRequest('index/recommend',{
					page:page,
					sales:sales,price:price,   //  1/2  升序/降序
				}).then(res=>{
					console.log(res.data.data);
					if(res.data.code==1){
						let data=res.data.data
						if(data.list.length>0){
							console.log(this.shopList);
							this.shopList.push(...data.list)
						}else{
							this.$all.toast("没有更多了")
						}
					}
					console.log(this.shopList);
					
				})
			},
			
			tanchaung(){ //判断是否第一次登陆
				// console.log(uni.getStorageSync('tanchuang'),'啊实打实');
				if(!uni.getStorageSync('tanchuang')){
					this.show=true
				}
			},
			lingqu(){ //领取 退出弹窗
				this.$myRequest('user/user_coupon',{
					id:this.coupon.id
				}).then(res=>{
					console.log(res);
					this.$all.toast(res.data.msg)
					this.show = false
					if(res.data.code==1){
						uni.setStorageSync('tanchuang',true)
					}
				})
			},
			
			options(e){ //选择排序
				switch (e){
					case 0:
						this.page=1
						this.sales= ''
						this.price= ''
						this.shopList=[]
						this.$refs.uWaterfall.clear(); //清空列表数据
						this.getTJlist(this.page,this.sales,this.price) //排序获取推荐商品
					break;
					case 1:
						this.page=1
						this.sales= this.sales==1 ? 2 : 1
						this.price= ''
						this.shopList=[]
						this.$refs.uWaterfall.clear(); //清空列表数据
						this.getTJlist(this.page,this.sales,this.price) //排序获取推荐商品
					break;
					case 2:
						this.page=1
						this.price= this.price==1 ? 2 : 1
						this.sales= ''
						this.shopList=[]
						this.$refs.uWaterfall.clear(); //清空列表数据
						this.getTJlist(this.page,this.sales,this.price) //排序获取推荐商品
					break;
				}
			},
			getSystemInfo(){ //获取系统信息
				try {
					const res = uni.getSystemInfoSync();
					this.$all.setData('windowHeight',res.windowHeight)
					this.$all.setData('statusBarHeight',res.statusBarHeight)
				} catch (e) {
				    // error
				}
			},
			
			search(){ //去搜索
				if(!this.is_login()) return  //未登录 去登录
				uni.navigateTo({
					url:"../../mine/pages/index/search"
				})
			},
			go_class(item,index){ //去分类页面
				if(!this.is_login()) return  //未登录 去登录
				console.log(item);
				uni.reLaunch({
					url:"../class/class?classid="+item.id
				})
			},
			miaoshaList(){ //秒杀商品列表
				if(!this.is_login()) return  //未登录 去登录
				// this.$all.toast('暂未开放')
				// return
				uni.navigateTo({
					url:"../../mine/pages/index/miaosha/miaoshaList"
				})
			},
			pindanList(){ //拼单商品列表
				if(!this.is_login()) return  //未登录 去登录
				// return
				uni.navigateTo({
					url:"../../mine/pages/index/pindan/pinndanList"
				})
			},
			jifenList(){ //积分商品列表
				if(!this.is_login()) return  //未登录 去登录
				// return
				uni.navigateTo({
					url:"../../mine/pages/index/jifen/jifenList"
				})
			},
			
			go_shopdetail(item){ //普通商品详情页
				console.log(1);
				if(!this.is_login()) return  //未登录 去登录
				uni.navigateTo({
					url:"../shop/shopDetail?shopid="+item.id
				})
			},
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fafafa;
	}
	.u-countdown-time[data-v-072523e7]{
		padding: 2px !important;
	}
	.content{
		padding: 40px 15px 15px;
		.search{
			padding: 10px 15px;background-color: #FFFFFF;border-radius: 30px;width: 300px;margin-bottom: 10px;
		}
		.con_2{
			padding: 15px 0;
			.con_2_class{
				width: 20%;text-align: center;
				image{
					width: 30px;height: 30px;border-radius: 5px;margin-bottom: 2px;
				}
			}
		}
		.con_3{
			.con_3_left{
				height: 150px;width: 48%;background-color: #fff6f1;border-radius: 5px;padding: 15px 10px 5px;
				image{
					width: 62px;height: 77px;
				}
			}
			.con_3_right{
				width: 48%;height: 150px;
				.top{
					background-color: #fff6f1;border-radius: 5px;height: 70px;margin-bottom: 10px;padding: 5px;
					image{
						width: 72px;height: 71px;
					}
				}
				
			}
			
		}
		.con_4{
			.title{
				padding: 20px 0;text-align: center;
				.fenge{
					width: 80px;height: 1px;background-color: #000000
				}
			}
			.options{
				padding-bottom: 10px;
				.option{
					padding-right: 25px;
				}
			}
			
		}
		
	}
	.yuyue{
		position: fixed;top: 50%;right: 15px;
		image{
			width: 100px;
			height: 100px;
		}
	}
	
	.mask{
		width:250px;height: 200px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);text-align: center;padding: 30px 0;
		.price{
			align-items: flex-start;
			.price1{
				color: #ef2c48;padding-top: 5px;
			}
			.price2{
				font-size: 40px;color: #c26722;
			}
		}
		.lingqu{
			margin-top: 30px;color: #990815;
			.lingqu1{
				background-color: #fcd185;padding: 5px 50px;border-radius: 5px;
			}
		}
	}
	
</style>
